<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css"
      rel="stylesheet"
    />
    <title>WEUI 新闻列表</title>
    <style></style>
  </head>
  <body>
    <!-- nav bar -->
    <div class="weui-navbar">
      <a href="#" class="weui-navbar__item weui-bar__item_on">推荐</a>
      <a href="#" class="weui-navbar__item">热点</a>
      <a href="#" class="weui-navbar__item">娱乐</a>
    </div>
    <!-- search bar -->
    <div class="weui-search-bar" id="search_bar">
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input
            type="search"
            id="search_input"
            class="weui-search-bar__input"
            placeholder="搜索"
          />
          <a href="#" class="weui-icon-clear"></a>
        </div>
        <label
          id="search_text"
          for="search_input"
          class="weui-search-bar__label"
        >
          <i class="weui-icon-search"></i>
          <span>搜索</span>
        </label>
      </form>
      <a href="" class="weui-search-bar__cancel-btn">取消</a>
    </div>
    <!-- news-list -->
  </body>
  <script>
    const navBarItemEls = document.querySelectorAll('.weui-navbar__item');
    const navBarEl = document.querySelector('.weui-navbar');
    const searchInputEl = document.querySelector('#search_input');
    const searchBarEl = document.querySelector('.weui-search-bar');

    document
      .querySelector('.weui-search-bar__label')
      .addEventListener('click', function () {
        searchBarEl.classList.add('weui-search-bar_focusing');
      });

    // searchInputEl.addEventListener('focus', function (event) {
    //   console.log('聚焦了');
    // });

    // 优化了内存
    navBarEl.addEventListener('click', function (event) {
      const target = event.target;
      if (target.nodeName == 'A') {
        event.preventDefault();
        if (target.classList.contains('weui-bar__item_on')) {
          return;
        }
        document
          .querySelector('.weui-bar__item_on')
          .classList.remove('weui-bar__item_on');
        target.classList.add('weui-bar__item_on');
      }
    });

    // for (let i = 0; i < navBarItemEls.length; i++) {
    //   navBarItemEls[i].addEventListener('click', function () {
    //     if (this.classList.contains('weui-bar__item_on')) {
    //       return;
    //     }
    //     document
    //       .querySelector('.weui-bar__item_on')
    //       .classList.remove('weui-bar__item_on');
    //     this.classList.add('weui-bar__item_on');
    //   });
    // }
  </script>
</html>
